<template>
    <div class="app-container">
        <div class="router-view-container">
            <router-view />
        </div>
        <van-tabbar v-model="active" route>
            <van-tabbar-item replace to="/home" icon="home-o">{{ $t('nav.home') }}</van-tabbar-item>
            <van-tabbar-item replace to="/mine" icon="user-o">{{ $t('nav.mine') }}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(0)

watch(() => route.path, (path) => {
    switch (path) {
        case '/home':
            active.value = 0
            break
        case '/mine':
            active.value = 1
            break
    }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.app-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    :deep(.van-tabbar) {
        flex-shrink: 0;
    }

    .router-view-container {
        flex: 1;
        overflow-y: auto;
    }
}
</style>